<template>
  <div class="areaCascader-containet">
    <el-cascader
      style="width: 100%"
      v-model="areaName"
      :options="options"
      :props="dataSource"
      @change="nodeChange"
    ></el-cascader>
  </div>
</template>
<script>
  import { computed, reactive, ref } from 'vue'
  import areas from '@/components/AreaCascader/area.json'

  export default {
    name: 'areaCascader',
    props: {
      modelValue: Number,
      allName: String,
      areaAll: String,
      city: Number,
      district: Number,
      province: Number,
    },
    emits: [
      'update:modelValue',
      'update:city',
      'update:district',
      'update:province',
      'update:areaAll',
    ],
    setup(props, context) {
      const options = areas.data
      const dataSource = reactive({
        value: 'id',
        label: 'extName',
        children: 'districtsDtos',
      })
      // const areaName = ref([])
      const nodeChange = function (val) {
        if (val.length >= 2) {
          const tmp = []
          let name = ''
          options.forEach((e) => {
            if (e.id === val[0]) {
              name += e.extName
              e.districtsDtos &&
                e.districtsDtos.forEach((e) => {
                  if (e.id === val[1]) {
                    name += e.extName
                    e.districtsDtos &&
                      e.districtsDtos.forEach((e) => {
                        if (e.id === val[2]) {
                          name += e.extName
                        }
                      })
                  }
                })
            }
          })

          context.emit('update:modelValue', val[2])
          context.emit('update:province', val.length > 0 ? val[0] : null)
          context.emit('update:district', val.length > 1 ? val[1] : null)
          context.emit('update:city', val.length > 2 ? val[2] : null)
          context.emit('update:areaAll', name)
        }
        console.log(val)
      }
      let areaName = computed({
        set(val) {},
        get() {
          if (props.city) {
            return [props.province, props.district, props.city]
          } else {
            return [props.province, props.district]
          }
        },
      })
      return {
        dataSource,
        nodeChange,
        areaName,
        options,
      }
    },
  }
</script>
<style lang="scss" scoped>
  .areaCascader-containet {
    width: 100%;
  }
</style>
